<template>
	<view>
		<!-- <view style="background-color: #fff;padding-top: 20rpx;padding-bottom: 20rpx;">
			<view @click="showCalendar()" style="margin: 20rpx auto; width: 670rpx; background-color: #fff; border: 2rpx solid #999;height: 100rpx;display: flex;align-items: center;justify-content: center;flex-direction: row;border-radius: 100rpx;">
				<u-icon slot="icon" size="32" name="calendar" color="#999"></u-icon>
				<text style="color: #999;margin-left: 10rpx;">{{toolTip}}</text>
			</view>
		</view> -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view v-for="(item,index) in list" :key="index"
				style="padding:20rpx 30rpx;background-color: #fff;margin-top: 20rpx;padding-right: 40rpx;">
				<view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view style="display: flex;flex-direction: column;margin-left: 20rpx;">
							<view style="font-size: 24rpx; color: #262626;">余额提现到-{{item.bank_name}} <text
									style="font-weight: bold;">({{item.card_number}})</text></view>
							<view style="font-size: 24rpx;color: #bcbcbc;font-weight: bold;  margin-top: 8rpx;">
								{{item.create_time}}</view>
						</view>
					</view>
					<view class="right">
						<view class="" style="font-size: 24rpx;color: #bcbcbc;font-weight: bold;">
							¥{{item.amount}}
						</view>
						<view class="p" v-if="item.status==0">
							申请中
						</view>
						<view class="p" v-if="item.status==1">
							已审核
						</view>
						<view class="p" v-if="item.status==2">
							已驳回
						</view>
						<view class="p" v-if="item.status==3">
							打款中
						</view>
						<view class="p" v-if="item.status==4">
							已打款
						</view>
						<view class="p" v-if="item.status==5">
							打款失败
						</view>
					</view>
				</view>
				<view v-if="item.status==2 && item.status_message" style="color: #DD524D;font-size: 24rpx;margin-top: 20rpx;padding-left: 20rpx;">{{item.status_message}}</view>
			</view>


		</mescroll-body>

		<u-calendar v-model="showCalendarStatus" mode="range" @change="change"></u-calendar>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {withdrawalLog} from '@/common/user.api.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				pagination: {
					page: 1,
					pageSize: 0,
					total: 0,
				},
				upOption: {
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: "没有更多数据了"
				},
				showCalendarStatus: false,
				startDate: '',
				endDate: '',
				toolTip: "选择日期",
			}
		},
		onLoad({}) {},
		onShow() {
			this.pagination.page = 1;
			this.pagination.current = 1;
			this.list = []
			// this.mescroll.scrollTo(0)
			// this.mescroll.setPageNum(1)
		},
		methods: {
			getData() {
				let that = this;
				withdrawalLog({
					page: that.pagination.page,
					pageSize: 20,
					start_date: that.startDate,
					end_date: that.endDate
				}).then(res => {
					console.log(res)
					that.mescroll.endByPage(res.list.length, res.pagination.total)

					if (that.pagination.page == 1) {
						that.list = res.list
					} else {
						that.list = [...that.list, ...res.list]
					}

					that.pagination = res.pagination;
					that.pagination.page++
				})
			},
			upCallback() {
					this.getData()
			},
			downCallback() {
				this.pagination.page = 1;
				this.mescroll.resetUpScroll();
			},
			showCalendar() {
				this.showCalendarStatus = true
			},
			change(e) {
				console.log(e)
				this.pagination.page = 1;
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.getData(1)
				this.toolTip = "从" + e.startDate + "到" + e.endDate
			}
		}
	}
</script>

<style>
	body {
		background-color: #f5f5f5;
	}
</style>
<style scoped lang="scss">
	.right .p {
		text-align: center;
		font-size: 24rpx;
		color: #ec6a38;
	}
</style>
